<template>
  <!-- 容器 -->
  <div class="charts" ref="charts"></div>
</template>
 
<script setup lang="js">
import { ref, onMounted, onUnmounted } from "vue";
const { proxy } = getCurrentInstance();
const echarts = proxy.echarts
const props = defineProps(['dataList'])

const XdataList = ref()
const YdataList = ref()
watch(props, (newProps) => {
  XdataList.value = newProps.dataList.map(item => item.ny);
  YdataList.value= newProps.dataList.map(item => item.sumData);
  setData()
}), { immediate: true }

const myChart = ref()
onMounted(() => {
  // 只要窗口大小发生像素变化就会触发
  window.addEventListener("resize", () => {
    myChart.value.resize(); // 窗口发生改变就更新echarts
  });
  // 基于准备好的dom，初始化echarts实例
  // 作用: 将一个对象标记为不可以被转化为代理对象。返回该对象本身。
  // 应用场景:
  // 1.有些值不应被设置成响应式时, 例如复杂的第三方类库等
  // 2.当渲染具有不可变数据源的大列表时, 跳过响应式转换可以提高性能
  // 3.在动态渲染组件的时候我们就可以使用 markRaw 包裹。
  myChart.value = markRaw(echarts.init(proxy.$refs['charts']));
  
})
const setData=()=>{
// 绘制图表
myChart.value.setOption({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  xAxis: {
    data:XdataList.value,
    //隐藏x轴
    show: false,
    type: "category",
  },
  yAxis: {
    //隐藏y轴
    show: false,
  },
  //系列
  series: [
    {
      type: "line",
      data: YdataList.value,
      //拐点的样式的设置
      itemStyle: {
        opacity: 0,
      },
      //线条的样式
      lineStyle: {
        color: "purple",
      },
      //填充颜色设置
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "purple", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#fff", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },
  ],
  //布局调试
  grid: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
  },
});
}
onUnmounted(() => {
  // 卸载echarts实例
  myChart.value.dispose();
  window.removeEventListener("resize", myChart.value);
});

</script>
 
<style scoped>
.charts
{
  width: 100%;
  height: 100%;
}
</style>